import { PropType } from 'vue';
import './index.scss';

export type TTab = {
  label: string;
  value: string | number;
  disabled?: boolean;
};

export default defineComponent({
  props: {
    tabs: {
      type: Array as PropType<TTab[]>,
      default: () => []
    },
    modelValue: {
      type: [String, Number],
      default: ''
    },
    size: {
      type: String as PropType<'default' | 'large'>,
      default: 'default'
    }
  },
  emits: ['update:modelValue', 'change'],
  setup(props, { emit }) {
    const { tabs } = toRefs(props);
    const valueRef = computed({
      get() {
        return props.modelValue || tabs?.value[0].value;
      },
      set(val) {
        emit('update:modelValue', val);
      }
    });

    const handleChange = (tab: TTab) => {
      if (!tab.disabled) {
        valueRef.value = tab.value;
        emit('change', tab.value);
      }
    };

    return () => (
      <ul class={['tabs-button', `tabs-button--${props.size}`]}>
        {tabs.value.map((tab) => {
          return (
            <li
              class={['tabs-button-item', { active: valueRef.value === tab.value }, { disabled: tab.disabled }]}
              onClick={() => handleChange(tab)}>
              {tab.label}
            </li>
          );
        })}
      </ul>
    );
  }
});
